<script setup>
  import {onMounted, ref} from "vue";
  import {useRoute, useRouter} from "vue-router";

  const items =
    [
      {
        "item": "发现音乐",
        "url": "/index"
      },
      {
        "item": "我的音乐",
        "url": "/mine/like"
      },
      {
        "item": "上传音乐",
        "url": "/upload"
      },
      {
        "item": "搜索音乐",
        "url": "/search"
      },
      {
        "item": "VIP",
        "url": "/vip"
      },
    ]
  const route = useRoute()
  const current = () => {
    if(route.name.startsWith('index')) return 0
    if(route.name.startsWith('mine')) return 1
    if(route.name.startsWith('upload')) return 2
    if(route.name.startsWith('search')) return 3
    if(route.name.startsWith('vip')) return 4
  }

  const token = ref(localStorage.getItem('token'))
  const username = ref(localStorage.getItem('username'))
  var avatar = ref(localStorage.getItem('avatar'))
  if (localStorage.getItem('avatar') == null || localStorage.getItem('avatar') === undefined) {
    avatar = '/src/assets/img/icon.png'
  }else {
    avatar = localStorage.getItem('avatar').trim() === '' ? '/src/assets/img/icon.png' : avatar
  }
  // avatar = 'src/assets/img/icon.png'

  // const avatar = localStorage.getItem('avatar').trim() == '' ? 'src/assets/img/icon.png' : info.avatar

  const vipStatus = ref({
    "veryVipStatus": true,
    "veryVipExpireTime": '2028-10-18',
    "commonVipStatus": true,
    "commonVipExpireTime": '2028-10-18',
  })
  onMounted(() => {
    // 查询一下vip状态
  })
  const router = useRouter()
  const logout = () => {
    localStorage.clear()
    router.push("/login")
  }
  const iconRef = ref()
  function addHoverClass() {
    iconRef.value.classList.add('fa-bounce');
  }

  function removeHoverClass() {
    iconRef.value.classList.remove('fa-bounce');

  }
</script>

<template>
  <div class="header">
    <img width="80" height="80" src="../assets/img/logo.png">
    <h2 style="margin-right: 30px;font-size: 28px;font-family: 微軟正黑體">FY音乐</h2>

<!--    <div @click="$router.push(item.url);current = index" :class="{select: select === index,current: current === index}"-->

<!--       @mouseleave="select = current" @mouseover="select = index" class="item" v-for="(item,index) in items" :key="index">-->
<!--      {{ item.item }}-->
<!--    </div>-->

    <div @click="$router.push(item.url)" :class="{current: index === current()}"
        class="item" v-for="(item,index) in items" :key="index">
      {{ item.item }}
    </div>


    <div class="login" style="margin-left: auto">

      <router-link :to="{ name: 'socialize'}" style="position: relative;top: 8px">
        <i ref="iconRef" @mouseenter="addHoverClass" @mouseleave="removeHoverClass" class="fa-solid fa-globe" style="color: #74C0FC;font-size: 36px;"></i>
      </router-link>


<!--      <div v-if="token == null || token === ''">-->
<!--        <span style="cursor:pointer;" @click="$router.push('/login')">登录</span>-->
<!--        <text style="cursor:default;font-family: '微软雅黑 Light'"> | </text>-->
<!--        <span style="cursor:pointer;" @click="$router.push('/register')">注册</span>-->
<!--      </div>-->
      <el-popover placement="bottom"
                  :width="290"
                  trigger="hover"
      >
<!-- v-else-->

        <template #reference>
          <div style="cursor:pointer;line-height: 90px;display: flex;flex-direction: row;align-items: center;gap: 10px">

            <img style="display: inline-block;border-radius: 50%;margin: 20px 0;width: 50px;height: 50px" :src="avatar" >

            <span style="line-height: 90px;">{{ username }}</span>
          </div>
        </template>


        <template #default>
          <div style="display: flex;flex-direction: column;gap: 17px;padding: 13px 8px">
            <div style="position: relative;margin-bottom: 4px">
              <img width="70" height="70" style="display: inline-block;border-radius: 50%;cursor:pointer;" :src="avatar" >
              <span class="hover" style="position: absolute;top: 25px;left: 80px;font-size: 11px">{{ username }}</span>
            </div>
            <div class="open-vip">
              <div>
                <p class="hover" style="font-size: 15px;">超级会员</p>
                <p v-if="vipStatus.veryVipStatus" style="font-size: 12px;color: #888888">{{ vipStatus.veryVipExpireTime }}到期</p>
                <p v-else style="font-size: 12px;color: #888888">开通享受极高品质音乐</p>
              </div>
              <div v-if="vipStatus.veryVipStatus" class="very-vip-btn">续费</div>
              <div v-else class="very-vip-btn">开通</div>
            </div>

            <div class="open-vip">
              <div>
                <p class="hover" style="font-size: 15px;">普通会员</p>
                <p v-if="vipStatus.commonVipStatus" style="font-size: 12px;color: #888888">{{ vipStatus.commonVipExpireTime }}到期</p>
                <p v-else style="font-size: 12px;color: #888888">开通享受高品质音乐</p>
              </div>
              <div v-if="vipStatus.commonVipStatus" class="common-vip-btn">续费</div>
              <div v-else class="common-vip-btn">开通</div>
            </div>

            <router-link :to="{ name: 'order', query: { order: 'value1' }}" >
              <div class="hover" style="font-size: 15px;cursor: pointer">我的订单</div>
            </router-link>

            <router-link :to="{ name: 'myPost'}">
              <div class="hover" style="font-size: 15px;cursor: pointer">我的帖子</div>
            </router-link>

            <router-link :to="{ name: 'notice'}">
              <div class="hover" style="font-size: 15px;cursor: pointer">评论通知</div>
            </router-link>

            <div class="hover" @click="logout()" style="font-size: 15px;cursor: pointer">退出登录</div>

          </div>
        </template>
      </el-popover>
    </div>


  </div>
</template>

<style scoped>
.header {
  font-size: 18px;
}
.open-vip {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.very-vip-btn {
  background-image: linear-gradient(90deg, #f9d860, #fae590);
  color: #c7922b;
  border-radius: 4px;
  width: 70px;
  line-height: 30px;
  height: 30px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;

}
.very-vip-btn:hover {
  background-image: linear-gradient(90deg, #fadb6d, #fae79d);
}
.common-vip-btn {
  background-color: #e44e54;
  color: #fff;
  border-radius: 4px;
  width: 70px;
  line-height: 30px;
  height: 30px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.common-vip-btn:hover {
  background-color: #e96161;
}
.item {
  padding: 0 20px;
  cursor: pointer;
  width: 72px;
  text-align: center;
}
.item:hover {
  background: linear-gradient(to bottom,#fdd3b5,#e8b988);
  color: #fafafa;
}
.header {
  background-color: white;
  width: 1200px;
  padding: 0 calc(50vw - 600px);
  height: 90px;
  line-height: 90px;
  display: flex;
}
.current {
  background: linear-gradient(to bottom,#fdd3b5,#e8b988);
  color: #fafafa;
}
.login {
  display: flex;
  align-items: flex-end;
  gap: 30px;
}
.login>span {
  display: inline-block;
  cursor: pointer;
  font-family: "微软雅黑 Light";
  padding: 0 10px;
}
.login>span:hover {
  color: #e4836f;
  cursor: pointer;
}
i {
  cursor: pointer;
}
</style>
